<script setup>
const navigateTo = () => {
  uni.navigateTo({
    url: '/pages/chat/chat'
  })
}
</script>

<template>
  <div class="content">
    <header>
      <div class="avatar">
        <div><img alt=""
                  src="https://img2.baidu.com/it/u=2373877329,1068104021&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"></div>
        <div>关注</div>
      </div>
    </header>
    <nav>
      <div class="phone"><img
          alt="" src="https://img0.baidu.com/it/u=2636656953,3661468484&fm=253&fmt=auto&app=138&f=JPEG?w=568&h=375">
      </div>
      <div class="title">web前端学习</div>
      <div class="details">
        找到一个一起学习web前端的朋友可以让你们互相学习、互相支持，共同进步。你可以在社交媒体上或者技术论坛上寻找，或者加入一些专门讨论前端开发的社群。在那里你可以结识志同道合的朋友，分享你的学习经验和困惑，一起解决bug，相互激励。给你们的学习团队起个鼓舞人心的名字，像“前端探索者联盟”或者“代码编织者团队”，这样能够增强团队凝聚力和合作氛围。
      </div>
    </nav>
    <footer>
      <div class="match">
        <div class="phone"><img alt="" src="./img/找搭子.png"></div>
        <div class="text" @click="navigateTo">找搭子</div>
      </div>
      <div class="message">
        <div class="phone"><img alt="" src="./img/消息.png"></div>
        <div class="text">消息</div>
      </div>
      <div class="like">
        <div class="phone"><img alt="" src="./img/赞.png"></div>
        <div class="text">点赞</div>
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.content header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content header div:nth-child(1) {
  display: flex;
}

.content header .back {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

.content header .back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content header .avatar {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
}

.content header .avatar div:nth-child(1) {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.content header .avatar div:nth-child(1) img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.content header .avatar div:nth-child(2) {
  flex: 1;
  margin-left: 4px;
}

.content nav {
  margin: 10px 0;
  flex: 1;
  overflow: auto;
  width: 100%;
  background: rgba(240, 240, 240, 0.2);
}

.content nav .phone {
  width: 100%;
  height: 300px;
}

.content nav .phone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.content nav .title {
  margin: 10px 0;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.content nav::-webkit-scrollbar {
  display: none;
}

.content footer {
  height: 40px;
  display: flex;
}

.content footer > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
}

.content footer .match, .content footer .message, .content footer .like {
  display: flex;
}

.content footer .match .phone, .content footer .message .phone, .content footer .like .phone {
  width: 20px;
  height: 20px;
}

.content footer .match .phone img, .content footer .message .phone img, .content footer .like .phone img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

</style>